<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>注册</title>
        <link rel="stylesheet" type="text/css" href="css/common.css">
        <link rel="stylesheet" href="css/register.css">
		<!--导入jquery-->
		<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/common.css">
		<script src="js/jquery-3.3.1.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/getParameter.js"></script>
    </head>
	<body>
	<div id="app">
		<!--引入头部-->
		<div id="header">
		</div>
		<!-- 头部 end -->
		<div class="rg_layout">
			<div class="rg_form clearfix">
				<div class="rg_form_left">
					<p>新用户注册</p>
					<p>USER REGISTER</p>
				</div>
				<div class="rg_form_center">

					<!--注册表单-->
					<form id="registerForm">
						<!--提交处理请求的标识符-->
						<input type="hidden" name="action" value="register">
						<table style="margin-top: 25px;">
							<tr>
								<td class="td_left">
									<label for="username">用户名</label>
								</td>
								<td class="td_right">
									<input type="text" id="username" v-model="user.username" name="username" placeholder="请输入账号">
								</td>
							</tr>
							<tr>
								<td class="td_left">
									<label for="password">密码</label>
								</td>
								<td class="td_right">
									<input type="text" id="password" v-model="user.password" name="password" placeholder="请输入密码">
								</td>
							</tr>

							<tr>
								<td class="td_left">
									<label for="telephone">手机号</label>
								</td>
								<td class="td_right">
									<input type="text" id="telephone" v-model="user.telephone" name="telephone" placeholder="请输入您的手机号">
								</td>
							</tr>


							<tr>
								<td class="td_left">
									<label for="check">验证码</label>
								</td>
								<td class="td_right check">
									<input type="text" id="check" name="check" class="check">
									<img src="checkCode" height="32px" alt="" >
								</td>
							</tr>
							<tr>
								<td class="td_left">
								</td>
								<td class="td_right check">
									<input type="button" class="submit" @click="register()" value="注册">
									<span id="msg" style="color: red;"></span>
								</td>
							</tr>
						</table>
					</form>
				</div>
				<div class="rg_form_right">
					<p>
						已有账号？
						<a href="#">立即登录</a>
					</p>
				</div>
			</div>
		</div>

	</div>
	<!--导入底部-->
	<div id="footer">
	</div>

    </body>
	<script src="js/jquery-1.11.0.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<!--导入布局js，共享header和footer-->
	<script type="text/javascript" src="js/include.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
	new Vue({
		el:"#app",
		data:{
		    user:{}//初始化用户对象，方便绑定注册表单模型数据
		},
		methods:{
			//定义注册方法
			register(){
				//发送ajax请求，提交user模型数据
				axios.post("/user?action=saveUser",this.user).then(
						//回调函数
					resp=>{
						console.log(resp);
						let result = resp.data;
						if("ok"==result){
							//注册成功，跳转到首页
							location.href="index.html";
						}
					}
				).catch(error=>{
					console.log(error);
				});
			}
		}
	})
</script>
</html>